<!DOCTYPE html>
<html lang="zh-CN">
<style>
    .pic{width: 400px; margin: 5px;}
    .box{display: flex;justify-content: left}
</style>
<head>
    <meta charset="UTF-8">
    <title>加载 JSON 数据</title>
</head>
<body>
<div id="app">
    <div  v-for="file in files" :key="file.name">
        <h3>{{ file.name }}</h3>
        <p>路径: {{ file.path }}</p>
        <div class="box">
            <div v-for="image in file.images">
                <img :src="image" alt="Preview" class="pic">
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            files: []
        },
        created() {
            this.loadJsonData();
        },
        methods: {
            loadJsonData() {
                fetch('file.txt')
                    .then(response => response.text()) // 读取文本内容
                    .then(text => {
                        let lines = text.trim().split('\n'); // 按行分割
                        let jsonArray = [];
                        lines.forEach(line => {
                            try {
                                let jsonObject = JSON.parse(line); // 解析每行的 JSON
                                jsonArray.push(jsonObject);
                            } catch (error) {
                                console.error('Error parsing JSON:', error);
                            }
                        });
                        this.files = jsonArray; // 设置到 files 数组
                    })
                    .catch(error => console.error('Error fetching data:', error));
            }
        }
    });
</script>
</body>
</html>